<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
    class="w-full"
  >
    <el-form-item label="主设备" prop="deviceId">
      <el-select v-model="newFormInline.deviceId" placeholder="请选择主设备">
        <el-option
          v-for="option in deviceOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="关联设备" prop="refDeviceId">
      <el-select
        v-model="newFormInline.refDeviceId"
        placeholder="请选择关联设备"
      >
        <el-option
          v-for="option in deviceOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref, defineProps, defineExpose } from "vue";
import { FormProps } from "../componentsUtils/type/deviceRelationTypes";
import { formRules } from "../componentsUtils/rule/deviceRelationRules";
//import { deviceOptions } from "../componentsUtils/useDeviceRelationTable";

// 定义组件属性
const props = withDefaults(
  defineProps<{
    formInline?: any;
    title?: string;
    deviceOptions?: { label: string; value: number }[];
  }>(),
  {
    formInline: () => ({
      id: 0,
      dealerId: 0,
      tenantId: 0,
      deviceId: 0,
      refDeviceId: 0
    }),
    title: "",
    deviceOptions: () => [
      {
        label: "默认设备",
        value: 0
      }
    ]
  }
);

// 响应式变量
const newFormInline = ref(props.formInline);
const ruleFormRef = ref();

// 获取表单引用的方法
function getRef() {
  return ruleFormRef.value;
}

// 暴露方法给父组件
defineExpose({ getRef });
</script>
